<!DOCTYPE html>
<html>
	<head>
		<title>Filter Json</title>
		<script type="text/javascript" src="../js-lib/jquery/core/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="plugin/jquery-filter-json-plugin.js"></script>
		<script type="text/javascript" src="../resources/sample.json"></script>
		
		<link rel="stylesheet" type="text/css" href="style/style.css" />
	</head>

	<body class="text">
		<table class="input-form">
			<tr class="input-row">
				<td class="input-label text inputBorder">
					JSON:
					<table>
						<tr>
							<td>Use:</td>
							<td><input type="radio" name="sample-select" value="sample1">Sample1</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
							<td><input type="radio" name="sample-select" value="sample2">Sample2</td>
						</tr>
					</table>
				</td>
				<td class="input-field text inputBorder">
					<textarea id="json" class="textArea" name="json">
					</textarea>
				</td>
			</tr>
			
			<tr class="input-row">
				<td class="input-label text inputBorder">Property:</td>
				<td class="input-field text inputBorder">
					<input type="text" id="property" name="property" value="title" />
					<div class="property-actions">
						<input type="checkbox" id="avoidDuplicates" class="checkbox" name="avoidDuplicates" value="" checked="checked"/>
						<span class="input-label-checkbox">Avoid Duplicates</span>
					</div>
				</td>
			</tr>
			
			<tr class="input-row">
				<td class="input-label text inputBorder">Return Parent Object:</td>
				<td class="input-field text inputBorder">
					<input type="checkbox" id="wrapper" name="wrapper" value=""/>
				</td>
			</tr>
			
			<tr class="input-row">
				<td class="input-label text inputBorder">Property Value:</td>
				<td class="input-field text inputBorder">
					<input type="text" id="propertyValue" name="propertyValue" value="" />
					<div class="property-value-actions">
						<input type="radio" id="isStartsWith" class="checkbox" name="searchcriteria" value="" checked="checked"/>
						<span class="input-label-checkbox">Starts With</span>
						<input type="radio" id="isCheckContains" class="checkbox" name="searchcriteria" value="" />
						<span class="input-label-checkbox">Check Contains</span>
						<input type="checkbox" id="isMatchCase" class="checkbox" name="isMatchCase" value="" />
						<span class="input-label-checkbox">Match Case</span>
					</div>
				</td>
			</tr>
			
			<tr class="input-row">
				<td class="input-label text inputBorder">Filtered JSON:</td>
				<td class="input-field text inputBorder">
					<textarea id="filteredJson" class="textArea" readonly/></textarea>
				</td>
			</tr>
			
			<tr class="input-row">
				<td colspan="2" class="buttonContainer">
					<input type="button" id="filterJson" value="Filter JSON" />
				</td>
			</tr>
			<tr class="input-row">
				<td id="info" colspan="2"></td>
			</tr>
		</table>
	</body>
	
	<script>
		var $ = jQuery.noConflict();
		
		$( document ).ready(function() {
			$( ":input[name='sample-select']" ).click(function(e) {
				$( "#json" ).val( JSON.stringify( sample[$( this ).val()] ) );
			});
			
			// selecting the first json sample
			$( ":input[name='sample-select']:first" ).click();
			
			$( "#filterJson" ).click(function() {
				var startTime = new Date().getTime(),
					json = JSON.parse( $( "#json" ).val() ),
					property = $( "#property" ).val(),
					avoidDuplicates = $( "#avoidDuplicates" ).is( ":checked" ),
					wrapper = $( "#wrapper" ).is( ":checked" ),
					propertyValue = $( "#propertyValue" ).val(),
					startsWith = $( "#isStartsWith" ).is( ":checked" ),
					checkContains = $( "#isCheckContains" ).is( ":checked" ),
					matchCase = $( "#isMatchCase" ).is( ":checked" );
					
				$( "#filteredJson" ).val( "" );
				
				try {
					var config = {
							property: property.split(","),
							wrapper: wrapper,
							value: propertyValue,
							checkContains: checkContains,
							startsWith: startsWith,
							matchCase: matchCase,
							avoidDuplicates: avoidDuplicates
						},
						o = $.fn.filterJson(json, config).toArray();

					$( "#filteredJson" ).val( (o != null && o.length > 0) ? JSON.stringify( o ) : "" );
					$( "#info" ).html("Returned " + o.length + " results in " + (new Date().getTime() - startTime) + " milliseconds.");
				}
				catch( e ) {
					console.error( e.message );
				}
			});
			
			$( "#propertyValue" ).keyup();
		});
		
		$( "#propertyValue" ).keyup(function() {
			if($.trim( $( this ).val() )) {
				$( ".property-value-actions" ).show();
			}
			else {
				$( ".property-value-actions" ).find( "input:checkbox" ).attr("checked", false);
				$( ".property-value-actions" ).hide();
			}
		});
	</script>
</html>